import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import { useRef } from 'react';

import { ModalForm, ProFormText, ProFormTextArea, ProTable } from '@ant-design/pro-components';
import { Col, Form, message, Popconfirm, Row } from 'antd';

import { delete_api, get_list_api, post_save_api } from './api';


export default function Page() {
  const ref = useRef<ActionType>();
  // const [formAdd] = Form.useForm<DeptApi.Dto>();
  const [formAddChild] = Form.useForm<DeptApi.Dto>();
  const [formEdit] = Form.useForm<DeptApi.Dto>();

  const columns: ProColumns<DeptApi.List>[] = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 100,
    },
    // {
    //   title: '编号',
    //   width: 240,
    //   copyable: true,
    //   search: false,
    //   dataIndex: 'id',
    //   render: (_) => <a>{_}</a>,
    // },
    {
      title: '组织名称',
      width: 160,
      dataIndex: 'deptName',
    },
    // {
    //   title: '部门编号',
    //   search: false,
    //   dataIndex: 'deptNo',
    // },

    {
      title: '备注',
      search: false,
      dataIndex: 'remark',
    },
    {
      title: '创建时间',
      search: false,
      dataIndex: 'createTime',
    },
    {
      title: '修改时间',
      search: false,
      dataIndex: 'updateTime',
    },
    {
      title: '操作',
      align: 'left',
      width: 180,
      key: 'option',
      valueType: 'option',
      render: (_, row) => {
        console.log(row.ji);
        if(row.none){

          return  [          <ModalForm<DeptApi.Dto>
            key="edit"
            title="编辑"
            width={600}
            modalProps={{
              destroyOnClose: true,
              maskClosable: false,
              onCancel: () => {},
            }}
            trigger={
              <a
                onClick={() => {
                  setTimeout(() => {
                    // 延迟填入数据，为了防止from未创建
                    formEdit.setFieldsValue(row);
                  }, 100);
                }}
              >
                编辑
              </a>
            }
            form={formEdit}
            autoFocusFirstInput
            submitTimeout={2000}
            onFinish={async (values) => {
              console.log(values);
              values.id = row.id;

              const res = await post_save_api(values);
              console.log(res);
              if (res.success) {
                // 刷新

                ref.current?.reload();
                message.success('提交成功');
              }

              return res.success;
            }}
          >
            <Row gutter={16}>
              <Col span={24}>
                <ProFormText
                  rules={[{ required: true, message: '请输入组织名称' }]}
                  placeholder="请输入组织名称"
                  name="deptName"
                  label="组织名称"
                />
              </Col>
              <Col span={24}>
                <ProFormTextArea placeholder="请输入备注" name="remark" label="备注" />
              </Col>
            </Row>
          </ModalForm>, <Popconfirm
            key="delete"
            title="删除"
            description="确认删除此条数据?"
            onConfirm={async () => {
              console.log(row.id);
              const res = await delete_api(row.id);
              if (res.success) {
                // 刷新
                ref.current?.reload();
                message.success('删除成功');
              }
            }}
            onCancel={() => {
              message.error('删除已取消');
            }}
            okText="是"
            cancelText="否"
          >
            <a style={{ color: '#F56C6C' }}>删除</a>
          </Popconfirm>];
        }else{
          return [
            <ModalForm<DeptApi.Dto>
              key="edit"
              title="编辑"
              width={600}
              modalProps={{
                destroyOnClose: true,
                maskClosable: false,
                onCancel: () => {},
              }}
              trigger={
                <a
                  onClick={() => {
                    setTimeout(() => {
                      // 延迟填入数据，为了防止from未创建
                      formEdit.setFieldsValue(row);
                    }, 100);
                  }}
                >
                  编辑
                </a>
              }
              form={formEdit}
              autoFocusFirstInput
              submitTimeout={2000}
              onFinish={async (values) => {
                console.log(values);
                values.id = row.id;
  
                const res = await post_save_api(values);
                console.log(res);
                if (res.success) {
                  // 刷新
  
                  ref.current?.reload();
                  message.success('提交成功');
                }
  
                return res.success;
              }}
            >
              <Row gutter={16}>
                <Col span={24}>
                  <ProFormText
                    rules={[{ required: true, message: '请输入组织名称' }]}
                    placeholder="请输入组织名称"
                    name="deptName"
                    label="组织名称"
                  />
                </Col>
                <Col span={24}>
                  <ProFormTextArea placeholder="请输入备注" name="remark" label="备注" />
                </Col>
              </Row>
            </ModalForm>,
            <ModalForm<DeptApi.Dto>
              key="addchildren"
              title={`新增-${row.deptName}-子级组织`}
              width={600}
              modalProps={{
                destroyOnClose: true,
                maskClosable: false,
                onCancel: () => {},
              }}
              trigger={<a>新增子级组织</a>}
              form={formAddChild}
              autoFocusFirstInput
              submitTimeout={2000}
              onFinish={async (values) => {
                values.pId = row.id;
                const res = await post_save_api(values);
                console.log(res);
                if (res.success) {
                  // 刷新
  
                  ref.current?.reload();
                  message.success('提交成功');
                }
  
                return res.success;
              }}
            >
              <Row gutter={16}>
                <Col span={24}>
                  <ProFormText
                    rules={[{ required: true, message: '请输入子级组织' }]}
                    placeholder="请输入子级组织名称"
                    name="deptName"
                    label="子级组织名称"
                  />
                </Col>
                <Col span={24}>
                  <ProFormTextArea placeholder="请输入备注" name="remark" label="备注" />
                </Col>
              </Row>
            </ModalForm>,
    
            row.pId === '0'? (
              ''
            ) : ( row.ji ==='1'?(''):(
        
              <Popconfirm
              key="delete"
              title="删除"
              description="确认删除此条数据?"
              onConfirm={async () => {
                console.log(row.id);
                const res = await delete_api(row.id);
                if (res.success) {
                  // 刷新
                  ref.current?.reload();
                  message.success('删除成功');
                }
              }}
              onCancel={() => {
                message.error('删除已取消');
              }}
              okText="是"
              cancelText="否"
            >
              <a style={{ color: '#F56C6C' }}>删除</a>
            </Popconfirm>)
             
            ),
          ];

        }
    
      },
    },
  ];

  return (
    <PageContainer>
      <ProTable<DeptApi.List>
        actionRef={ref}
        request={async (params = {}) => {
          // console.log(params);

          const res = await get_list_api({
            deptName: params.deptName,
          });

          return {
            data: res.data,
            success: true,
          };
        }}
        rowKey="id"
        pagination={false}
        expandable={{
          childrenColumnName: 'routes',
          indentSize: 20,
        }}
        columns={columns}
        dateFormatter="string"
        toolBarRender={() => []}
      />
    </PageContainer>
  );
}
